不啰嗦，直接上代码了

`imgUrls: [``{``url:` `'[http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg](http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg)'``,``isChange:1,``},``{``url:` `'[http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg](http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg)'``,``isChange: 2,``},``{``url:` `'[http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg](http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg)'``,``iChange: 3,``},``],`复制代码

字段isChange是用来判断图片样式的

页面代码

`
    
     ``
     
      ``
      
       ``
       
        ``
        ``
        
         ``
         
          开启不老童话
         ``
         
          >
         ``
        ``
       ``
      ``
     ``
    `复制代码

样式代码

`swiper{``height``:``520``rpx;``margin``:``20``rpx` `30``rpx;``}``.shuffing{``text-align``:` `center``;``width``:``100%``;``position``:` `relative``;``}``.shuffing-item{``position``:` `absolute``;``width``:``100%``;``lef``:``50%``;``top``:``50%``;``transform: translateX(``-50%``) translateY(``-50%``);``height``:``520``rpx;``transition:` `all` `0.3``s;``}``.shuffing-item-next{``width``:``85%``;``height``:``85%``;``transform:translateX(``-100%``) translateY(``-50%``);``transition:` `all` `0.3``s;``}``.shuffing-item-preo{``width``:``85%``;``height``:``85%``;``transform:translateX(``40%``) translateY(``-50%``);``transition:` `all` `0.3``s;``}``.shuffing-item>image{``width``:``100%``;``height``:``100%``;``}``.shuffing-mask{``position``:` `absolute``;``bottom``:` `0``;``width``:``100%``;``line-height``:` `60``rpx;``background``: rgba(``0``,``0``,``0``,``0.6``);``color``:``#fff``;``display``: flex;``justify-``content``: space-between;``padding``:``0` `20``rpx;``}`复制代码

感觉小程序有个swiper组件还是挺简单实现的 没有刚开始想的那么难

本次给大家推荐一个交流圈，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。对web开发技术感兴趣的同学，欢迎加入：582735936，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。